//新增整个平台主播开播情况（功能16）
//有问题，对接失败
<template>
  <div>
    <blockquote>数据截止至2021年8月9日</blockquote>
    <div id="function16" :style="{ width: '1000px', height: '700px' }" />
  </div>
  
</template>
<script>
import stores from "@/store";
export default {
  mounted() {
    this.$axios
      .post(stores.spring_url + "/livecount/rate", "function16")
      .then((res) => {
        console.log(res);
        //this.tableData=res.data.tableData
        this.init(res.data.tableData);
      });
  },
  methods: {
    init(res) {
      console.log(res);
      const time = [];
      const count1 = [];
      const count2 = [];
      const rate = [];
      for (let i of res) {
        time.push(24-i.time);
        count1.push(i.count1);
        count2.push(i.count2);
        
        rate.push({value:i.rate,label:{position: 'right'}});
      }
      console.log(rate)
      const myChart = this.$echarts.init(document.getElementById("function16"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["count1", "count2", "主播开播变化率"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: time, //['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
        ],
        series: [
          {
            name: "主播开播变化率",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "left",
            },
            emphasis: {
              focus: "series",
            },
            data:rate
          },
        ],
      });
    },
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>